@import "./common";
@import "../packages/mdc-tab-indicator/mixins";
@import "../packages/mdc-tab-indicator/mdc-tab-indicator";
@import "../packages/mdc-elevation/mixins";
@import "../packages/mdc-theme/color-palette";

.hero {
  flex-direction: column;
}

.demo {
  @include mdc-elevation(1);

  display: flex;
  width: 400px;
  height: 50px;
  margin: 2rem 0;
}

.demo-item {
  @include mdc-tab-indicator-surface;

  flex: 2 0 auto;
  height: inherit;
  background-color: $material-color-grey-50;
  cursor: pointer;
}

.demo-item--narrow {
  flex: 1 0 auto;
}

.demo-item--wide {
  flex: 3 0 auto;
}

.demo-item:hover {
  background-color: white;
}

.demo > .demo-item:nth-child(n + 2) {
  border-left: 1px solid $material-color-grey-300;
}

.demo-label {
  position: relative;
  z-index: 2;
}

.custom-color-underline {
  @include mdc-tab-indicator-underline-color($material-color-orange-a400);
}

.custom-color-icon {
  @include mdc-tab-indicator-icon-color($material-color-orange-a400);
}

.custom-height-underline {
  @include mdc-tab-indicator-underline-height(8px);
}

.custom-height-icon {
  @include mdc-tab-indicator-icon-height(44px);
}

.custom-border-radius {
  @include mdc-tab-indicator-underline-height(5px);
  @include mdc-tab-indicator-underline-top-corner-radius(5px);
}

.custom-fading-underline {
  @include mdc-tab-indicator-underline-height(4px);
  @include mdc-tab-indicator-underline-color($material-color-green-a400);
  @include mdc-tab-indicator-underline-top-corner-radius(4px);
}

.custom-sliding-icon {
  @include mdc-tab-indicator-icon-height(30px);
  @include mdc-tab-indicator-icon-color($material-color-pink-a400);
}

.custom-icon {
  height: inherit;
  fill: currentColor;
}
